<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" isELIgnored="false" %>
<%@ include file="/JSP/Common/head.jsp"%>
<div class="nowPosition">你所在的位置是修改密码</div>
<div class="updatePassword-div">
    <p style="padding-left: 8%;font-family: '楷体';color: red">${MESSAGE}</p>
    <form action="${pageContext.request.contextPath}/JSP/user.go" method="post" id="updateForm">
        <input type="hidden" name="method" value="updatePassword">
        <label>
            <span class='updatePassword-span'>旧密码</span>
            <input id="oldPassword" type="password" class="updatePassword-input-password inshadow txtclick" placeholder="请输入旧密码" />
            <span style="color: red;font-family: '楷体';">*</span>
        </label><br />
        <label>
            <span class='updatePassword-span'>新密码</span>
            <input id="newPassword" name="newPassword" type="password" class="updatePassword-input-password inshadow txtclick" placeholder="请输入新密码" />
            <span style="color: red;font-family: '楷体';">*</span>
        </label><br />
        <label>
            <span class='updatePassword-span'>确认新密码</span>
            <input id="rnewPassword" type="password" class="updatePassword-input-password inshadow txtclick" placeholder="请再次输入新密码" />
            <span  style="color: red;font-family: '楷体';">*</span>
        </label><br />
        <label >
            <input id="savePassword" type="button" class="updatePassword-input-btn inshadow-white" value="提交" />
        </label>
    </form>
</div>
<%@ include file="/JSP/Common/foot.jsp"%>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/JS/updatePassword.js" ></script>--%>
<script type="text/javascript">
    var updateForm = null;
    var oldPassword = null;
    var newPassword = null;
    var rnewPassword = null;
    var savePassword = null;
    var update_result_1 = null;
    var update_result_2 = null;
    var update_result_3 = null;
    var flag_oldPassword = false;
    var flag_newPassword = false;
    var flag_rnewPassword = false;

    $(function(){
        updateForm = $("#updateForm");
        oldPassword = $("#oldPassword");
        newPassword = $("#newPassword");
        rnewPassword = $("#rnewPassword");
        savePassword = $("#savePassword");
        update_result_1 = $("#updateForm span:eq(1)");
        update_result_2 = $("#updateForm span:eq(3)");
        update_result_3 = $("#updateForm span:eq(5)");


        oldPassword.on({
            focus:function(){
                setStyle(update_result_1, {'color':'red'});
                setHtml(update_result_1, "(请输入旧密码)");
            },
            blur:function(){
                $.ajax({
                    type:"GET",
                    url:getPath() + "/JSP/user.go",
                    data:{method:"validationOldPassword", oldPassword:oldPassword.val()},
                    dataType:"json",
                    success:function(result){
                        if (result.result == "true") {//旧密码正确
                            setStyle(update_result_1, {'color':'#87CEEB'});
                            setHtml(update_result_1, getImgTick() + "(验证成功)");
                            flag_oldPassword = true;
                        } else if(result.result == "false"){
                            setStyle(update_result_1, {'color':'red'});
                            setHtml(update_result_1, getImgCross() + "(旧密码输入错误)");
                            flag_oldPassword = false;
                        } else if(result.result == "sessionError"){
                            setStyle(update_result_1, {'color':'red'});
                            setHtml(update_result_1, getImgCross() + "(登录过期，请重新登陆)");
                            flag_oldPassword = false;
                        } else if(result.result == "empty"){
                            setStyle(update_result_1, {'color':'red'});
                            setHtml(update_result_1, getImgCross() + "(请填写旧密码)");
                            flag_oldPassword = false;
                        }
                    },
                    error:function(result){
                        setStyle(update_result_1, {'color':'red'});
                        setHtml(update_result_1, getImgCross() + "(请求错误)");
                        flag_oldPassword = false;
                    }
                });
            }
        });

        newPassword.on({
            focus:function(){
                setStyle(update_result_2, {'color':'red'});
                setHtml(update_result_2, "(密码必须大于4位小于10位)");
            },
            blur:function(){
                if ((newPassword.val().length < 4) ||  (newPassword.val().length > 8)) {
                    setStyle(update_result_2, {'color':'red'});
                    setHtml(update_result_2, getImgCross() + "(密码不通过,请重新设置密码)");
                    flag_newPassword = false;
                }else{
                    flag_newPassword = true;
                    setStyle(update_result_2, {'color':'#87CEEB'});
                    setHtml(update_result_2, getImgTick() + "(密码通过)");
                }

                if (rnewPassword.val().length != 0) {
                    if (flag_newPassword) {
                        if (rnewPassword.val() == newPassword.val()) {
                            setStyle(update_result_3, {'color':'#87CEEB'});
                            setHtml(update_result_3, getImgTick() + "(密码一致)");
                            flag_rnewPassword = true;
                        } else{
                            setStyle(update_result_3, {'color':'red'});
                            setHtml(update_result_3, getImgCross() + "(密码不一致)");
                            flag_rnewPassword = false;
                        }
                    } else{
                        setStyle(update_result_3, {'color':'red'});
                        setHtml(update_result_3, getImgCross() + "(上面密码不通过,请重新设置密码)");
                    }
                }
            }
        });

        rnewPassword.on({
            focus:function(){
                setStyle(update_result_3, {'color':'red'});
                setHtml(update_result_3, "(请再次输入相同密码)");
            },
            blur:function(){
                if ((newPassword.val().length < 4) ||  (newPassword.val().length > 8)) {
                    setStyle(update_result_3, {'color':'red'});
                    setHtml(update_result_3, getImgCross() + "(上面密码不通过,请重新设置密码)");
                    flag_newPassword = false;
                    flag_rnewPassword = false;
                } else if(rnewPassword.val() == newPassword.val()){
                    setStyle(update_result_3, {'color':'#87CEEB'});
                    setHtml(update_result_3, getImgTick() + "(密码一致)");
                    flag_rnewPassword = true;
                } else{
                    setStyle(update_result_3, {'color':'red'});
                    setHtml(update_result_3, getImgCross() + "(密码不一致)");
                    flag_rnewPassword = false;
                }
            }
        });

        savePassword.on({
            mouseenter:function(){
                setStyle($(this), {
                    'box-shadow':'0px 0px 10px white inset',
                    'background-color':'#87CEEB',
                    'color':'#FFFFFF'
                });
            },
            mouseleave:function(){
                setStyle($(this), {
                    'box-shadow':'0px 0px 5px white inset',
                    'background-color':'#87CEEB',
                    'color':'#FFFFFF'
                });
            },
            mousedown :function(){
                setStyle($(this), {
                    'background-color':'#D3EDF8',
                    'color':'#696969'
                });
            },
            mouseup  :function(){
                setStyle($(this), {
                    'background-color':'#87CEEB',
                    'color':'#FFFFFF'
                });
                if (flag_newPassword && flag_oldPassword && flag_rnewPassword) {
                    if(confirm("确定要修改密码？")){
                        updateForm.submit();
                    }
                }
            }
        });
    });
</script>